<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>功能实现</title>
		<script src="./js/jquery-1.11.1.js"></script> 
		<!-- JQuery操作动画
		     show()              功能：显示效果   本质：display：block
			 hide()              功能：隐藏效果   本质：display：none
			 
			 slideDown()         功能：向下(滑动式)效果
			 sildeup()           功能：向上(滑动式)效果
			 
			 fadeIn(毫秒数)      功能：淡入   本质：显示+透明度：0~1
			 fadeOut(毫秒数)     功能：淡出   本质：隐藏+透明度：1~0
		 -->
		<style>
			div{
				width: 500px;
				height: 500px;
				background: #ff0;
				disp lay: hide;
			}
		</style>
	</head>
	<body>
		<button>按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="sd">滑动向下滑按钮</button>
		<button id="su">滑动向上滑按钮</button>
		<button id="fi">淡入按钮</button>
		<button id="fo">淡出按钮</button>
		<div></div>
		<script>
			/* JQ 动画：显示与隐藏 */
			$("#fi").click(function(){
				$("div").fadeIn(600);
			});
			$("#f0").click(function(){
				$("div").fadeOut(600);
			});
			
			
			 $("show").click(function(){
			 	//隐藏  css属性直接给元素设置
			 	$("div").hide();
			 })
			 $("show").click(function(){
			 	$("sd").slideDown();
			 });
			 $("show").click(function(){
			 	$("su").slideUp();
			 });
			 $("show").click(function(){
				$("div").show();
			 });
			//  $("button").click(function(){
			// // 	//隐藏  css属性直接给元素设置
			//  $("div").css("display","block").css("border-radius","50%").css("background","#f00");
			//  });
		</script>
	</body>
</html>